{{ block title }}
Period {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

<!-- CSS styles -->
<style>
    .flex-container {
        float: center;
        padding: 20px;
    }

    .flex-child {
        width: 33%;
        float: left;
        padding: 20px;
    }

    .flex-child-2 {
        width: 33%;
        min-height: 247.98px;
        float: left;
        padding: 20px;
    }

    .flex-child-3 {
        width: 33%;
        float: left;
        padding: 20px;
    }
    
    .flex-child-4 {
        width: 67%;
        float: right;
        padding: 20px;
    }

    /* Inserting this collapsed row between two flex items will make 
    * the flex item that comes after it break to a new row */
    .break {
        width: 100%;
        float: center;
        height: 40px;
    }

</style>

<div class="flex-container">
    <div class="flex-child">
        <h3>Starting Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Interest Earned Last Period</b></h6>
                <p class="card-text">
                    <span id="interest-earned"></span>
                </p>
            </div>
        </div>

        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Total Cash</b></h6>
                <p class="card-text">
                    <span id="total-cash"></span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="flex-child">
        <h3>Ending Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Remaining Wealth</b></h6>
                <p class="card-text">
                    <span id="final-savings"></span>
                </p>
            </div>
        </div>
    
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Final Stock Balance</b></h6>
                <p class="card-text">
                    <span id="final-stock"></span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="flex-child-2">
        <h3>Market Data</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Real interest rate</b></h6>
                <p class="card-text">
                    <span id="real-interest"></span> %
                </p>
            </div>
        </div>

        <!-- <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b> </b></h6>
                <p class="card-text">
                    <span id="final-stock"></span>
                </p>
            </div>
        </div> -->
    </div>
    
</div>

<!--
<table class="table table-striped">
    <thead>
    <tr>
        <th>Interest Earned Since Last Period</th>
        <th>Initial Savings</th>
        <th>Total Cash</th>
        <th>Final Savings with Current Selection</th>
        <th>Final Stock Balance with Current Selection</th>
        <th></th>
    </tr>
    </thead>
    <tbody id="cart-body2">

    </tbody>
</table>
-->


<br>
<div class="break"></div>
<div class="break"></div>
<div class="break"></div>
<div class="break"></div>
<br>

<div class="flex-container">
    <div class="flex-child-3">
        <h3>Catalog</h3>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Basket of Goods</h5>
                <p>   
                    Price: <span id="new-price"></span>
                </p>           
                <button type="button" value="1" onclick="addToCart(this)" class="btn btn-secondary">+1</button>
            </div>
        </div>
    </div>
    <div class="flex-child-4">
        <h3>My Cart</h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th>Total price</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="cart-body">

            </tbody>
        </table>


        <p>
            <button class="btn btn-primary">
                Finalize Purchase (Total : <b><span id="cart-total"></span></b>)
                <input type="hidden" name="responseTime" id="responseTime"/> 
            </button>

            <script>
                let myCart = document.getElementById('cart-body');
                let myBalance = document.getElementById('cart-body2');
                let cartTotal = document.getElementById('cart-total');
                let cardInterestEarned = document.getElementById('interest-earned');
                let cardCashOnHand = document.getElementById('total-cash');
                let cardFinalSavings = document.getElementById('final-savings');
                let cardFinalStock = document.getElementById('final-stock');
                let cardNewPrice = document.getElementById('new-price');
                let cardRealInterest = document.getElementById('real-interest')

                function cu(amount) {
                    return `${amount} ₮`;
                }

                function liveRecv(data) {
                    let html = '';
                    console.log(data)
                    for (let item of data.items) {
                        html += `
        <tr>
            <td>${item.name}</td>
            <td>${item.quantity}</td>
            <td>${cu(item.total_price)}</td>
            <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">-1</button></td>
        </tr>`;
                    }
                    myCart.innerHTML = html;
                    cartTotal.innerText = cu(data.total_price.toFixed(2));
                    cardInterestEarned.innerText = cu(data.interestEarned.toFixed(2));
                    cardCashOnHand.innerText = cu(data.cashOnHand.toFixed(2));
                    cardFinalSavings.innerText = cu(data.finalSavings.toFixed(2));
                    cardFinalStock.innerText = data.finalStock;
                    cardNewPrice.innerText = cu(data.newPrice.toFixed(2));
                    cardRealInterest.innerText = data.realInterest;

                    let html2 = ''
                    html2 += `
        <tr>
            <td>${cu(data.interestEarned)}</td>
            <td>${cu(data.initial_savings)}</td>
            <td>${cu(data.cashOnHand)}</td>
            <td>${cu(data.finalSavings)}</td>
            <td>${cu(data.finalStock)}</td>
        </tr>`;   

                    myBalance.innerHTML = html2;
            }
            
                //This bit creates 2 variables, one will function as a timer, the other will hold the timer output. They are set to 0 and -1 here to initialise them, these will not be the final outputs.
                var pageTimeElapsed = 0;
                var pageTimerID = -1;

                //This function captures the timer output. When the timer starts it will increase 'pageTimeElapsed' every second and send this value to the 'timeSpent' variable that will be saved
                //When a person moves to the next page, or the page times out, the final value that the timer was on will be saved. The value resets each round/page.
                function pageTick() {
                pageTimeElapsed++
                document.getElementById("responseTime").value = pageTimeElapsed;
                }

                //This function automatically starts the timer when the page loads. In this case I want seconds so the interval is set to 1000, but I believe if you set it to 1 then it will count milliseconds - you will need to test this
                window.onload = function() { 
                if(pageTimerID == -1){
                    pageTimerID = setInterval(pageTick, 1);
                    } 
                }
            </script>
    </div>
</div>

<br><br>

<script>

    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }

    function removeFromCart(ele) {
        modifyCart(ele.value, -1);
    }

    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

</script>

<br><br><br><br>

{{ endblock }}